<template>
	<div>
		<div class="textBox">
			<transition name="slide">
				<p class="text" v-if="cur" :key="cur.id" @click="detail(cur)" @mouseenter="clearTimeOut"
					@mouseleave="startTimeOut">
					<span class="notice">{{ cur.title }}</span>
				</p>
			</transition>
			<div class="more" @click="getList" v-if="noticeList.length > 0">
				<img style="width: 15px;" src="../../assets/tips_icon_2d3b782.gif" alt="">
				<span style="margin-left: 10px;position: absolute;right: 15px;">更多公告</span>
			</div>
		</div>
		<el-dialog title="公告详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<p v-if="cur" v-html="cur.content"></p>
		</el-dialog>
		<el-dialog title="公告列表" :visible.sync="dialogVisibleList" width="80%">
			<el-table v-loading="loading" :data="noticeList" style="width: 100%">
				<el-table-column prop="title" label="标题"></el-table-column>
				<el-table-column prop="createDate" label="发布时间" width="160"></el-table-column>
				<el-table-column prop="expireDate" label="到期时间" width="160"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination :page-size="queryData.size" :current-page="queryData.page"
					layout="prev, pager, next,total,jumper" :total="total" background
					@current-change="handleCurrentChange">
				</el-pagination>
			</div>
			<el-dialog title="公告详情" :visible.sync="innerVisible" width="50%" append-to-body>
				<p v-html="content"></p>
			</el-dialog>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "scroll",
		data() {
			return {
				content: '',
				innerVisible: false,
				queryData: {
					type: 1,
					size: 6,
					page: 1
				},
				total: 0,
				loading: false,
				dialogVisibleList: false,
				dialogVisible: false,
				textArr: [],
				number: 0,
				cur: "",
				timer: null,
				noticeList: []
			};
		},
		mounted() {
			this.getNoticeList()
			this.$http.get(this.$api.noticeHomePage, {
				type: 1
			}).then((res) => {
				if (res.code == 0) {
					this.textArr = res.data;
					this.startMove();
				}
			});
		},
		methods: {
			startMove() {
				this.timer = setTimeout(() => {
					this.cur = this.textArr[this.number];
					if (this.number === this.textArr.length - 1) {
						this.number = 0;
					} else {
						this.number += 1;
					}
					this.startMove();
				}, 2500); // 滚动不需要停顿则将2000改成动画持续时间
			},
			handleClick(row) {
				this.content = ''
				this.innerVisible = true;
				this.content = row.content
			},
			detail(cur) {
				clearTimeout(this.timer)
				this.content = ''
				this.dialogVisible = true;
				this.content = JSON.parse(JSON.stringify(cur.content))
			},
			clearTimeOut() {
				clearTimeout(this.timer)
			},
			startTimeOut() {
				if (!this.dialogVisible) {
					this.startMove()
				}
			},
			getNoticeList() {
				this.loading = true
				this.$http.get(this.$api.noticeList, this.queryData).then((res) => {
					if (res.code == 0) {
						this.noticeList = res.data;
						this.total = res.extraInfo;
						this.loading = false
					}
				});
			},
			getList() {
				this.noticeList = []
				this.queryData.page = 1
				this.dialogVisibleList = true;
				this.getNoticeList()
			},
			handleCurrentChange(val) {
				this.queryData.page = val;
				this.getNoticeList();
			},
			handleClose() {
				this.startMove()
				this.dialogVisible = false
			}
		},
	};
</script>

<style scoped>
	.textBox {
		height: 40px;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
	}

	.text {
		width: 50%;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -30%;
		cursor: pointer;
	}

	.more {
		display: flex;
		align-items: center;
		height: 100%;
		background-color: #fdf6ec;
		color: #e6a23c;
		text-align: center;
		cursor: pointer;
		padding: 0 15px;
	}

	.slide-enter-active,
	.slide-leave-active {
		transition: all 0.5s linear;
	}

	.slide-enter {
		transform: translateY(20px);
		opacity: 1;
	}

	.slide-leave-to {
		transform: translateY(-20px);
		opacity: 0;
	}

	.notice {
		display: block;
		width: 100%;
		padding: 8px 16px;
		margin: 0;
		box-sizing: border-box;
		border-radius: 4px;
		position: relative;
		opacity: 1;
		background-color: #fdf6ec;
		color: #e6a23c;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.pages {
		display: flex;
		justify-content: center;
		margin: 30px 0;
	}
</style>
